<template>
	<!-- 添加 地址 -->
	<view class="content qxlj_back4">
		<view class="row b-b-b">
			<text class="tit">{{$t('contact.contactName')}}</text>
			<input class="input" type="text" v-model="addressData.Name" :placeholder="$t('contact.contactNamePlaceholder')" placeholder-class="placeholder" />
		   
		</view>
		 <view class="line">
			 <view class="shortLine"></view>
		 </view>
		<view class="row b-b">
			<text class="tit">{{$t('contact.mobile')}}</text>
			<input class="input" type="number" v-model="addressData.Mobile" :placeholder="$t('contact.mobilePlaceholder')" placeholder-class="placeholder" />
		</view>
		<view class="line">
					 <view class="shortLine"></view>
		</view>
		<pickRegions :defaultRegion="defaultRegionCode"  @getRegion="handleGetRegion">
			<view class="row b-b">
				<text class="tit">{{$t('contact.address')}}</text>
				<!-- <text  class="input"> -->
				<input class="input" v-model="location" :disabled="true" :placeholder="$t('contact.selectAddress')" placeholder-class="placeholder" />
			</view>
		</pickRegions>
		<view class="line">
					 <view class="shortLine"></view>
		</view>
		<view class="row b-b-c"> 
			<text class="tit">{{$t('contact.houseNumber')}}</text>
			<input class="input" type="text" v-model="addressData.Address" :placeholder="$t('contact.houseNumberPlaceholder')" placeholder-class="placeholder" />
		</view>
		
		<view class="row default-row">
			<text class="tit">{{$t('contact.setDefault')}}</text>
			<switch :checked="addressData.IsDefault===1" color="#498FFF" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">{{$t('contact.save')}}</button>
	</view>
</template>

<script>
	import { addAcceptAddress, updateAcceptAddress } from '@/api/mall.js';
	import { mapState, mapMutations, mapActions } from 'vuex';
	import pickRegions from '../components/pick-regions/pick-regions.vue'
	export default {
		components:{
			pickRegions
		},
		data() {
			return {
				pagePath:'',
				qqmapsdk:{},
				manageType: 'add',
				defaultRegionCode:[],
				addressData: {
					Name: '',
					Mobile: '',
					addressName: '在地图选择',
					Province: '',
					City:'',
					County:'',
					Address: '',
					IsDefault: 0
				}
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.base.userInfo
			}),
			location() {
				return `${this.addressData.Province}${this.addressData.City}${this.addressData.County}`
			}
		},
		onLoad(option){
			console.log(option)
			this.eventChannel = this.getOpenerEventChannel();
			if(option.page){
				this.pagePath = 1
			}
			let title = this.$t('contact.addAddress');
			if(option.type==='edit'){
				title = this.$t('contact.edit') + this.$t('contact.address')
				this.addressData = JSON.parse(option.data);
				if(this.addressData.Province==null){
					this.addressData.Province='';
				};
				if(this.addressData.City==null){
					this.addressData.City='';
				};
				if(this.addressData.County==null){
					this.addressData.County='';
				};
				this.defaultRegionCode = [this.addressData.Province,this.addressData.City,this.addressData.County];
				console.log('this.defaultRegionCode',this.defaultRegionCode)
			}
			
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			switchChange(e){
				this.addressData.IsDefault = e.detail.value ? 1 : 0
			},
			handleGetRegion(e) {
				console.log(e)
				this.addressData.Province = e[0].name
				this.addressData.City = e[1].name
				this.addressData.County = e[2].name
				this.$forceUpdate()
			},
			
			//提交
			confirm(){
				let data = this.addressData;
				if(!data.Name){
					this.$api.msg(this.$t('contact.enterContactName'));
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.Mobile)){
					this.$api.msg(this.$t('contact.enterValidMobile'));
					return;
				}
				if(!data.Province || !data.City || !data.County){
					this.$api.msg(this.$t('contact.selectAddressLocation'));
					return;
				}
				if(!data.Address){
					this.$api.msg(this.$t('contact.enterHouseNumber'));
					return;
				}
				uni.showLoading({
					title: this.$t('contact.saving'),
					mask:true
				})
				
				// 根据当前模式选择API
				const apiMethod = this.manageType === 'edit' ? updateAcceptAddress : addAcceptAddress;
				const successMsg = this.manageType === 'edit' ? this.$t('contact.editAddressSuccess') : this.$t('contact.addAddressSuccess');
				
				// 提交数据
				apiMethod(data).then(res => {
					uni.hideLoading();
					uni.showToast({
						title: successMsg,
						icon: 'success',
						duration: 1500,
						success: () => {
							setTimeout(() => {
								this.eventChannel.emit('addAddressComplete');
								uni.navigateBack({
									delta: 1
								});
							}, 1500);
						}
					});
				}).catch(err => {
					uni.hideLoading();
					this.$api.msg(err.msg || this.$t('contact.saveFailed'));
				});
			},
		}
	}
</script>

<style lang="scss">
    .content{
		width: 100%;
		min-height: 100vh;
		padding: 20rpx;
		
		.line{
			width: 100%;
			// margin-left: 5%;
			
			background-color: #f8f8f8;
			.shortLine{
				width: 90%;
				margin-left: 5%;
				height: 2rpx;
				background-color: #e9e9e9;
			}
		}
	}
	.b-b-b{
		border-radius: 10rpx 10rpx 0 0;
	}
	.b-b-c{
		border-radius: 0 0 10rpx 10rpx;
	}
	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30rpx;
		height: 110rpx;
		background: #fff;
		width: 100%;
	
		.tit{
			flex-shrink: 0;
			width: 120rpx;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.icon-dizhi{
			font-size: 36rpx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 20rpx;
		border-radius: 16rpx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16rpx) scale(.9);
		}
	}
	.add-btn{
    margin-top: 20rpx;
    height: 86rpx;
    background: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 44rpx;
    transition: all 0.3s ease;
    letter-spacing: 2rpx;

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 8rpx rgba(73,143,255,0.2);
    }
	}
</style>
